<template>
  <div class="app">
    <h2>
      当前计数：{{counter}}
    </h2>
    <button v-on:click="counter++">+1</button>
    <button @click="name='kobe'">修改name</button>
  </div>
</template>

<script>
import {ref, watchEffect} from "vue";

export default {
  name: "App-watchEffect",
  setup(props,context){
    const counter=ref(0)
    const name=ref('why')
   const stopWatch= watchEffect(()=>{
      console.log("counter.value:",counter.value,"name.value:",name.value)
      if(counter.value>10){
        stopWatch()
      }
    })

    return{
      counter,
      name
    }
  }
}
</script>

<style scoped>

</style>